<template>
  <div class="tabs">
    <div class="tabs-bar">
      <div
        v-for="(tab, idx) in tabs"
        :key="idx"
        :class="['tabs-tab', 'fz40', { active: activeTab === idx }]"
        @click="selectTab(tab, idx)"
      >
        {{ tab.title }}
      </div>
      <div class="tabs-tab fz40 tabs-dropdown-toggle" v-show="false">
        <div @click="toggleDropdown">更多 <i class="fa fa-caret-down"></i></div>
        <transition name="fade">
          <div v-if="isDropdownOpen" class="tabs-dropdown">
            <div
              v-for="(extraTab, extraIdx) in extraTabs"
              :key="extraIdx"
              :class="[
                'tabs-dropdown-item',
                { active: activeTab === displayedTabs.length + extraIdx },
              ]"
              @click="selectExtraTab(extraTab, displayedTabs.length + extraIdx)"
            >
              {{ extraTab.title }}
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div class="tabs-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  data() {
    return {
      activeTab: 1,
      tabs: [
        //应该与candle_period相匹配
        { title: '分时', value: { candle_period: 1 } },
        { title: '日K', value: { candle_period: 6 } },
        { title: '周K', value: { candle_period: 7 } },
        { title: '月K', value: { candle_period: 8 } },
        { title: '年K', value: { candle_period: 9 } },
      ],
      extraTabs: [
        { title: '', value: '' },
        { title: '', value: '' },
        // ...额外的tabs选项，这些选项不会直接显示在tabs-bar上
      ],
      displayedTabs: [], // 用于存储当前显示在tabs-bar上的tabs
      isDropdownOpen: false, // 控制下拉菜单的显示状态
    };
  },
  methods: {
    selectTab(item, idx) {
      this.activeTab = idx;
      this.$store.commit('stock/setKlineParmas', item.value);

      this.closeDropdown(); // 选择一个tab后关闭下拉菜单
      this.$emit('tab-change', item);
    },
    selectExtraTab(item, idx) {
      this.activeTab = idx;
      this.displayedTabs = [
        ...this.tabs,
        ...this.extraTabs.slice(0, this.extraTabs.indexOf(item) + 1),
      ]; // 更新displayedTabs以显示新选择的tab
      this.closeDropdown();
      this.$emit('tab-change', item);
    },
    toggleDropdown() {
      this.isDropdownOpen = !this.isDropdownOpen;
    },
    closeDropdown() {
      this.isDropdownOpen = false;
    },
  },
  created() {
    // 初始化displayedTabs，可以只包含前几个tabs，或者根据其他逻辑设置
    this.displayedTabs = this.tabs.slice(0 /* 你想要显示的数量 */);
  },
  mounted() {},
};
</script>

<style scoped>
.tabs {
  width: 100%;
}
.tabs-bar {
  display: flex;
}
.tabs-tab {
  position: relative;
  padding: 3vw 4vw;
  color: #999;
  cursor: pointer;
  user-select: none;
}
.tabs-tab.active {
  color: #333;
  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 30%;
    height: 4px;
    border-radius: 5px;
    background-color: rgb(247, 97, 6);
  }
}

.tabs-dropdown-toggle {
  position: relative;
  /* 样式设置，如背景色、内边距、光标等 */
  cursor: pointer;
  /* ...其他样式 */
}

.tabs-dropdown {
  /* 下拉菜单的样式设置，如位置、背景色、边框等 */
  position: absolute;
  top: 100%; /* 或者根据需要调整 */
  left: 0; /* 或者根据需要调整 */
  right: 0; /* 或者根据需要调整，可能还需要设置宽度 */
  background-color: white; /* 或者其他颜色 */
  border: 1px solid #ccc; /* 或者其他边框样式 */
  z-index: 7; /* 确保下拉菜单显示在其他内容之上 */
  /* ...其他样式，如滚动条、最大高度等 */
}

.tabs-dropdown-item {
  /* 下拉菜单中每个项的样式设置 */
  cursor: pointer;
  /* ...其他样式 */
}

.tabs-dropdown-item.active {
  /* 下拉菜单中激活项的样式设置 */
  /* ... */
}

/* 如果使用了Vue的<transition>组件，还需要为过渡效果添加样式 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>
